<template>
  <div>
    <el-card>
      <el-form ref='form' :inline='true' label-width='50px' :model='form'>
        <div class='formtop'>
          <el-form-item label='起始'>
            <el-date-picker
              v-model='form.date_start'
              size='mini'
              value-format='yyyy-MM-dd'
              type='date'
              placeholder='选择日期'
            />
          </el-form-item>
          <el-form-item label='截至'>
            <el-date-picker
              v-model='form.date_end'
              size='mini'
              value-format='yyyy-MM-dd'
              type='date'
              placeholder='选择日期'
            />
          </el-form-item>
          <el-form-item label='分类'>
            <el-select
              v-model='value2'
              multiple
              collapse-tags
              clearable
              filterable
              size='mini'
              placeholder='请选择'
            >
              <el-option
                v-for='item in options'
                :key='item.value'
                :label='item.label_name'
                :value='item.id'
              />
            </el-select>
          </el-form-item>
          <el-form-item label='' label-width='0'>
            <el-button
              class='h50'
              size='mini'
              type='primary'
              @click='getChartData'
            >
              查询
            </el-button>
          </el-form-item>

        </div>
        <el-form-item label='' label-width='0' style='flex: 1'>
          <!-- tab 类型 -->
          <div class='formRight'>
            <template v-for='item in tabData'>
              <!-- eslint-disable-next-line -->
              <div
                style='cursor: pointer'
                :class="item.id === typeId ? 'active' : ''"
                @click='handleType(item.id,item.unit)'
              >
                {{ item.type_name }}
              </div>
            </template>
          </div>
        </el-form-item>
      </el-form>

      <el-divider />
      <div id='myChart' class='chart' />
      <el-divider />
      <!--  报警信息容器  -->
      <div class='warningBox'>
        <div class='left' />
        <div>监测周期内，未发生告警，运行正常，请持续关注设备安全。</div>
      </div>
      <!--  表格数据  -->
      <div class='tableBox'>
        <el-table :data='tableData' border style='width: 100%'>
          <el-table-column prop='name' label='采集因子' align='center' />
          <el-table-column prop='max' label='最大值A' align='center' />
          <el-table-column prop='max_time' label='最大时间' align='center' />
          <el-table-column prop='min' label='最小值A' align='center' />
          <el-table-column prop='min_time' label='最小时间' align='center' />
          <el-table-column prop='average' label='平均值' align='center' />
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { electricityParameters, monitorChartData } from '@/api/realTime.js'
import * as echarts from 'echarts'

export default {
  name: 'content',
  components: {},
  props: {
    choseData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      typeId: 0, // 类型id
      tabData: [], // 类型数据
      tableData: [], // 下方表格数据
      value2: [],
      form: {
        name: '',
        region: '',
        date_start: '',
        date_end: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      options: [],
      //  图表数据
      option: {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
              // backgroundColor: 'F50808FF'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {
              show: true,
              icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
              title: '保存为图片',
              type: 'png',
              connectedBackgroundColor: 'rgb(245,8,8)',
              name: '',
              excludeComponents: ['toolbox'],
              lang: ['右键另存为图片'],
            },
          },
        },
        axisPointer: {
          link: [
            {
              xAxisIndex: 'all',
            },
          ],
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: `{value}`,
          },
          min: 'dataMin',
        },
        series: [],
      },
    }
  },
  watch: {
    // 树形数据
    choseData(nVal, oVal) {
      this.getTopSearch()
    },
  },
  created() {
    // 获取当前时间
    this.getTopSearch()
  },
  mounted() {
    this.form.date_start = this.getDay(-1)
    this.form.date_end = this.getDay(0)
    this.drawLine()
  },
  methods: {
    // 获取顶部参数查询
    getTopSearch() {
      // 默认的值有可能是undefined
      if (!this.choseData.id) return
      electricityParameters(this.choseData.id, this.typeId).then((res) => {
        this.options = res.data.child
        this.tabData = res.data.data
        this.value2 = []
        this.options.forEach(item => {
          this.value2.push(item.id)
        })
        if (this.tabData.length > 0 && this.typeId === 0) {
          this.typeId = this.tabData[0].id
          this.option.yAxis.axisLabel.formatter = `{value}${this.tabData[0].unit}`
        }
        this.getChartData()
      })
    },
    /**
     * @description: 获取表格数据
     * @author: 书童
     */
    getChartData() {
      if (!this.choseData.id) return
      monitorChartData({
        type_id: this.typeId, // 类型id
        param_id: this.value2, // 参数id
        start_time: this.form.date_start,
        end_time: this.form.date_end,
        monitor_id: this.choseData.id, // 监控id
      }).then((res) => {
        this.option.xAxis.data = res.data.xData
        this.tableData = res.data.tableData
        this.option.legend.data = res.data.legend
        const arr = [] // res.data.series
        res.data.series.forEach((item) => {
          const obj = {}
          obj.data = item.data
          obj.name = item.name
          obj.type = 'line'
          obj.markPoint = {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' },
            ],
          }
          obj.markLine = {
            data: [{ type: 'average', name: 'Avg' }],
          }
          arr.push(obj)
        })
        this.$set(this.option, 'series', arr)
        this.drawLine()
      })
    },
    /**
     * @description: 改变选中id
     * @author: 书童
     */
    handleType(id, unit) {
      this.option.yAxis.axisLabel.formatter = `{value}${unit}`
      this.unit = unit
      if (this.typeId === id) return
      this.typeId = id
      // this.getChartData()
      this.getTopSearch()
    },
    /**
     * @description: 获取当前日期
     * @author: hst
     * @param: day: 0今天，-1昨天
     */
    getDay(day) {
      var today = new Date()
      var targetday = today.getTime() + 1000 * 60 * 60 * 24 * day
      today.setTime(targetday)
      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth(month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
    // 初始化表格
    drawLine() {
      this.$echarts.dispose(document.getElementById('myChart'))
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      // myChart.clear()
      myChart.setOption(this.option, true)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .tableHead {
  background-color: #edf1f8 !important;
}

.h50 {
  height: 28px;
}

.box-card {
  /*height: 30px;*/
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
}

.formRight {
  width: 100%;
  overflow-x: auto;
  margin-top: 10px;
  margin-bottom: 10px;

  div {
    float: left;
    height: 35px;
    margin: 0 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #838ea0;
  }

  .active {
    height: 35px;
    background: linear-gradient(90deg, #3494ff, #006dff);
    //box-shadow: 0px 6px 12px 0px rgba(35, 113, 255, 0.29);
    border-radius: 17px;
    color: #ffffff;
    padding: 0px 25px;
  }
}

.chart {
  width: 100%;
  height: 500px;
}

.tableBox {
  //width: 1140px;
  //margin: 20px auto;
}

.warningBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  //width: 1140px;
  //height: 54px;
  border: 1px solid #cecdcd;
  background: #f1f1f1;
  border-radius: 10px;
  font-size: 14px;
  padding: 15px;
  margin: 10px auto;

  .left {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background-color: #333333;
    margin-right: 10px;
  }

  .right {
    font-size: 14px;
  }
}
</style>
